<template>
  <div class="detail-container">
    <sticky :z-index="10" :class-name="'sub-navbar ' + postForm.color">
      <el-button v-loading="loading" type="info" @click="$router.back()">
        返回
      </el-button>
      <el-button v-loading="loading" type="success" @click="submitForm">
        {{ true ? '更新' : '保存' }}
      </el-button>
    </sticky>

    <div class="app-container" style="padding: 10px 20px 50px 10px">

      <el-link v-if="product.skuName.length === 0" type="primary" @click="$router.push(`/product/edit/${id}`)">还没设置规格, 去添加</el-link>

      <div v-else>
        <sku-list :product="product" @change="changeSku" />
      </div>

      <!--<template v-else>
        <el-row>
          <h1>{{ product.title }}</h1>
          <el-col :span="24" v-if="false">
            <el-form-item label="价格" style="width: 350px">
              <el-input v-model="product.title" disabled />
            </el-form-item>
            <el-form-item label="库存" style="width: 350px">
              <el-input v-model="product.stock" disabled />
            </el-form-item>
            <el-form-item label="成本" style="width: 350px">
              <el-input v-model="product.price_cost" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider v-if="false" />
        <el-row>
          <el-col :span="4">
            <el-form-item label="请选择规格"></el-form-item>
          </el-col>
        </el-row>
        <el-row v-for="(item, index) in product.skuName" :key="index">
          <el-col :span="4" style="text-align: right; margin-bottom: 10px; padding-right: 20px">
            <el-tag
              style="font-weight: 700; cursor: pointer"
              :closable="item.checked"
              @click="handleCheckedAll(item)"
              @close="handleCloseAll(item)"
            >{{ item.name }}</el-tag>
          </el-col>
          <el-col :span="20">
            <template v-for="(o, i) in item.values">
              <el-tag
                :key="i"
                :type="!o.checked ? 'info': 'danger'"
                style="margin-right: 10px; cursor: pointer; margin-bottom: 10px"
                :closable="o.checked"
                @click="handleChecked(o, item)"
                @close="handleClose(o, item)"
                v-if="o.value"
              >
                {{ o.value }}
              </el-tag>
            </template>
          </el-col>
        </el-row>
        <br />
        <br />
        <el-row>
          <el-col :span="24">
            <el-form-item label="图片" prop="image">
              <upload-image
                bucket="product-sku"
                :max="1"
                :width="750"
                :height="750"
                :quality="50"
                @onSuccess="onSuccess"
                @onRemove="onRemove"
                :file-list="postForm.image"
              />
            </el-form-item>
            <el-form-item label="成本" prop="self_cost" style="width: 350px" required>
              <el-input v-model.trim="postForm.self_cost" />
            </el-form-item>
            <el-form-item label="价格" prop="price" style="width: 350px" required>
              <el-input v-model.trim="postForm.price" />
            </el-form-item>
            <el-form-item label="库存" prop="stock" style="width: 350px" required>
              <el-input v-model.trim="postForm.stock" />
            </el-form-item>
            <el-form-item label="排序" prop="sort" style="width: 200px">
              <el-input v-model.number="postForm.sort" />
              <span>-128 ~ 127</span>
            </el-form-item>
            <el-form-item label="状态" style="width: 200px">
              <el-switch v-model="postForm.status" />
            </el-form-item>
          </el-col>
        </el-row>
      </template>-->
    </div>
  </div>
</template>

<script>
import api from '@/api'
import Sticky from '@/components/Sticky'
// import UploadImage from '@/components/Upload/UploadImage'
import SkuList from './components/SkuList'
export default {
  name: 'Sku',
  components: {
    Sticky,
    SkuList
  },
  data() {
    return {
      id: -1,
      loading: false,
      postForm: {
        color: 'draft'
      },
      product: {
        skuName: [],
        sku: []
      },
      result: []
    }
  },
  created() {
    this.id = this.$route.params.product_id
    this.fetchProduct()
  },
  methods: {
    // 获取数据
    async fetchProduct() {
      const response = await api.sku.viewProduct({ product_id: this.id })
      this.product = Object.assign({}, response.data)
    },
    // 保存sku编辑数据
    changeSku(v) {
      this.result = v
    },
    /**
     * 提交表单
     */
    submitForm() {
      this.result.forEach(x => {
      })
      // console.log(this.result)
      api.sku.editSku({ list: this.result, product_id: this.id }).then(() => {
        this.$message.success('操作成功')
      })
    },
    /**
     * 图片上传
     */
    onSuccess(data, fileList) {
      if (data && data.id) {
        this.postForm.image.push({
          id: data.id,
          url: data.thumbnail
        })
      }
    },
    /**
     * 删除图片
     */
    onRemove(data, fileList) {
      if (data && data.id) {
        this.postForm.image = this.postForm.image.filter(x => x.id !== data.id)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.detail-container {
  //
}
</style>
